<template>
	<view class="verification">
		<navbar :config="config" backColor="#000000"></navbar>
		<view class="imageView">
			<image :src="imgUrl+'/login/logo.png'" class="logoImage"></image>
		</view>

		<!-- <u-tabs class="loginTab" :bar-width="60" active-color="#FF721B" inactive-color="#666666" :list="tabList"
			is-scroll :current="tabCurrent" @change="tabsChange"></u-tabs> -->
			<!-- height: calc(100vh - 400px); -->
		<view v-if="tabCurrent == 0" style="background-color: #ffffff;">
			<form @submit="formSubmit">
				<view class="content">
					<view class="contFrom">
						<view class="password">
							<view class="left">
								密码登录
							</view>
							<view class="right" @click="goToverification">
								验证码登录
							</view>
						</view>
						<view class="phone">
							<input type="number" v-model="phone" value="" name="phone" @input="onPhone" maxlength="11"
								placeholder="请输入手机号" placeholder-class="phone-login" />
						</view>
						<view class="phone">
							<input type="text" v-model="password" value="" name="pw" password="true" maxlength="11"
								@input="onPassword" placeholder="请输入登录密码" placeholder-class="password-login" />
						</view>
						<view class="agreement">
							<view class="whole">
								<view class="top" v-if="flag" @click="onFlag">
									<icon type="success" color="#FF0000" size="17"></icon>
								</view>
								<view class="top" v-else style="width: 35rpx;height: 35rpx;border-radius: 50%;
									border: #ccc solid 1rpx;" @click="onFlag"></view>
							</view>
							<view class="agree">
								我已阅读并同意<text @click="goToAgreement">《会员注册协议》</text>
							</view>
						</view>


					</view>
					<button class="login-button" :disabled="!phone||!password||!flag" form-type="submit">
						登录
					</button>

					<button class="noAccount" form-type="submit" @click="goToregister">
						立即注册
					</button>

					<button @click="goToForgetPass" class="forgetView">忘记密码</button>

				</view>
			</form>
		</view>
		<register v-if="tabCurrent == 1"></register>
	</view>
</template>

<script>
	import register from '../register/register.vue'
	import {
		appLogin,
		getAccountInfo
	} from "../../../api/login.js"
	export default {
		components: {
			register
		},

		data() {
			return {
				imgUrl: this.$mConfig.staticUrl,
				config: {
					title: '',
					backgroundColor: [1, "#fff"],
					back: true, //false是tolbar页面 是则不写
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000"
				},
				flag: false, //用户协议
				phone: "", //手机号
				password: "", //密码
				tabCurrent: 0,
				tabList: [{
						name: '登录'
					},
					{
						name: '注册'
					}
				]
				// isPhone:false,
			}
		},
		methods: {
			//忘记密码
			goToForgetPass() {
				uni.navigateTo({
					url: "../setup/forgetPass"
				})
			},
			//跳转用户注册协议
			goToAgreement() {
				uni.navigateTo({
					url: "./agreement"
				})
			},
			//验证码登录
			goToverification() {
				uni.redirectTo({
					url: "./verification"
				})


			},
			//去注册
			goToregister() {
				this.tabCurrent = 1;
				// uni.redirectTo({
				// 	url: "./register"
				// })
			},
			//登录
			async formSubmit(e) {

				if (!this.phone) {
					this.$mUtil.toast("请输入手机号")
					return false
				}
				if (!this.password) {
					this.$mUtil.toast("请输入密码")
					return false
				}
				if (this.flag == false) {
					this.$mUtil.toast("请先同意协议")
					return false
				}
				if (!(this.phone.match(this.$mConfig.telRegex))) {
					this.$mUtil.toast("请输入正确的手机号")
					return false
				}
				let param = {
					// mobile: this.phone,
					// password: this.password,
					// cid: uni.getStorageSync('cid')
					mobile: this.phone,
					password: this.password,
					cid: uni.getStorageSync('cid'),
					type: 0,
					version: "2.0.3"
				}
				// #ifdef APP-PLUS
				param.type = '0'

				const systemInfo = uni.getSystemInfoSync();
				param.version = systemInfo.appVersion
				console.log('version:', systemInfo.appVersion)
				// plus.runtime.getProperty(plus.runtime.appid, (info) => {
				// 	param.version = info.versionCode;
				// 	if (this.appInfo.number > info.versionCode) {
				// 		this.show = true
				// 	}
				// })
				// #endif
				// #ifdef H5
				param.type = '0'
				// const systemInfo = uni.getSystemInfoSync();
				// param.version = systemInfo.appVersion
				// console.log('version:', systemInfo.appVersion)
				// #endif
				// #ifdef MP-WEIXIN
				param.type = '1'
				// #endif

				let res = await this.$http.post(appLogin, param)
				if (res && res.code == 200) {
					if (res.data.code != 500) {
						this.$mUtil.toast("登录成功")
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync("shop", res.data.shop);
						this.$http.get(getAccountInfo).then(res => {
							console.log(res)
							if (res && res.code == 200) {
								uni.setStorageSync("personal", res.data)
								const app = getApp()
								app.getKeyFun()
								
							}
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					} else {
						this.$mUtil.toast(res.data.msg)
					}
				}
			},
			//手机号
			onPhone(e) {
				this.phone = e.detail.value
				// if(this.phone.match(this.$mConfig.telRegex)){
				// 	this.isPhone=true
				// }else{
				// 	this.isPhone=false
				// }
			},
			//密码
			onPassword(e) {
				this.password = e.detail.value
			},

			//用户协议
			onFlag() {
				this.flag = !this.flag
			},

			// 切换
			tabsChange(index) {
				this.tabCurrent = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.verification {
		width: 100%;
		height: 100vh;
		background-color: #ffffff;
	}

	.topBg {
		width: 100%;
		height: 520rpx;
		// background: #FF721B;
		background-image: url('https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/loginBg.png');
		background-size: 100% 100%;
		background-position: top;
		background-repeat: no-repeat;
		position: relative;

		.loginTab {
			width: 100%;
			position: absolute;
			bottom: 0;
			background-color: rgba(255, 255, 255, 0) !important;

			/deep/ .u-scroll-box {
				width: 100%;
				position: relative;
				display: flex;
				justify-content: space-around;
			}

			/deep/ .u-tab-bar {
				display: none;
			}

			/deep/ .u-tab-item {
				font-size: 18px !important;
				font-weight: 400 !important;
				color: #ffffff !important;
			}

		}
	}

	/deep/ .hx-navbar__content__main_center_txt {
		span {
			color: #fff;
			font-size: 36rpx;
			font-weight: 400;
			font-family: PingFang SC, PingFang SC-Regular;
		}
	}

	.contFrom {
		// padding: 0 40rpx;
	}

	.phone-login {
		color: #CCCCCC;
		font-size: 28rpx;
		font-weight: 500;
	}

	.password-login {
		color: #CCCCCC;
		font-size: 28rpx;
		font-weight: 500;
	}

	.go-to-register {
		padding: 18rpx 0;
		color: #FF721B;
		font-size: 32rpx;
		font-weight: Regular;
		width: 100%;
		text-align: center;
		margin-top: 24rpx;
		border: 1rpx solid #FF721B;
		border-radius: 20rpx;
	}

	.login-button {
		width: 635rpx;
		height: 96rpx;
		background: #FF211F;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		font-weight: 500;
		font-size: 31rpx;
		color: #FFFFFF;
		line-height: 31rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 335rpx;
	}

	.agreement {
		margin-top: 42rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		text-align: center;
		width: 100%;

		.whole {
			display: flex;
			align-items: center;
			width: 35rpx;
			height: 35rpx;
		}

		/deep/ .uni-icon-success {
			color: #FF211F !important;
		}
	}

	.agree {
		font-weight: 400;
		font-size: 27rpx;
		color: #999999;
		line-height: 27rpx;
		margin-left: 8rpx;

		text {
			color: #FF211F;
		}
	}

	.top {
		display: flex;
		align-items: center;
	}

	.choice {
		margin: 0 50rpx;
		display: flex;
		align-items: center;

		.whole {
			display: flex;
			align-items: center;
		}
	}



	.passpwd {
		display: flex;
		margin-top: 40rpx;
		padding-bottom: 28rpx;
		border-bottom: 1rpx solid #E6E6E6;

		.number {
			font-size: 28rpx;
			font-weight: 400;
			color: #474747;
		}

		input {
			flex: 1;
			margin-left: 40rpx;
		}
	}

	.phone {

		width: 635rpx;
		height: 96rpx;
		background: #F9F9F9;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		margin-top: 38rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-left: 38rpx;
		box-sizing: border-box;

		input {
			width: 635rpx;
			height: 96rpx;
		}
	}

	.password {
		display: flex;
		width: 296rpx;
		height: 31rpx;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;

		.left {
			font-weight: 600;
			font-size: 31rpx;
			color: #333333;
			line-height: 31rpx;
		}

		.right {
			font-weight: 400;
			font-size: 27rpx;
			color: #999999;
			line-height: 27rpx;

		}
	}

	.content {
		margin: 0 57rpx;
	}

	.logoImage {
		width: 160rpx;
		height: 160rpx;
		margin: 0 auto;
	}

	.imageView {
		width: 100%;
		height: 160rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 38rpx;
		margin-bottom: 115rpx;
	}

	.noAccount {
		width: 635rpx;
		height: 96rpx;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		border: 2rpx solid #FF211F;
		margin-top: 38rpx;
		font-weight: 400;
		font-size: 29rpx;
		color: #FF211F;
		line-height: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.forgetView {
		font-weight: 500;
		font-size: 27rpx;
		color: #333333;
		line-height: 27rpx;
		text-align: center;
		margin-top: 31rpx;
		
		
	}
</style>